<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .list{
             display: 'inline-block';
             list-style-type: 'none';
             padding: 0;
             margin: 0;
             overflow-y: scroll;
             height: 300px;
             width: 200px;
             border: 1px solid black;
             box-sizing: border-box;
             background-color: #f5f5f5;
             scroll-behavior: smooth;
             scrollbar-width: thin;
             scrollbar-color: #ccc #f5f5f5;
 
        

        }
    </style>
</head>
<body>
    <ul class="list"></ul>

    <script>
        const ul = document.querySelector('.list');
        const items = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'] 
        //文档碎片
    //    let frg = document.createDocumentFragment();



        const cloneUl=ul.cloneNode(true);
        for (let i=0; i<10000; i++){
            const li = document.createElement('li');
            li.textContent = Math.random()
            // ul.appendChild(li)
            cloneUl.appendChild(li)
        }
        
        ul.parentElement.insertBefore(ul, cloneUl)
        // ul.appendChild(frg)
        ul.style.display = 'block';
    </script>
</body>
</html>